<template>
    <div>
        <el-button type="primary" @click="inserteDialog">添加</el-button>
        <el-popover placement="right-start" width="1018" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click"  >
            <el-form :inline="true" :model="searchList" class="demo-ruleForm">
                <el-form-item label="卡号" style="margin-bottom: 5px;">
                    <el-input v-model="searchList.cardId"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="姓名" style="margin-bottom: 5px;"><el-input v-model="searchList.providerName"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="电话" style="margin-bottom: 5px;">
                    <el-input v-model="searchList.phone"  style="width: 120px;"></el-input>
                </el-form-item>
                <el-form-item label="性别" style="margin-bottom: 5px;">
                    <el-select v-model="searchList.sex"  style="width: 90px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option :value="1" label="男"></el-option>
                        <el-option :value="2" label="女"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="血型" style="margin-bottom: 5px;">
                    <el-select v-model="searchList.bloodType"  style="width: 90px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option v-for="item in bloodTypeList" :key="item.code" :value="item.code" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="介绍人" style="margin-bottom: 0;">
                    <el-input v-model="searchList.jsr"  style="width: 100px;"></el-input>
                </el-form-item>
                <el-form-item label="浆员状态" style="margin-bottom: 0;">
                    <el-select v-model="searchList.providerState"  style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option v-for="item in providerStatusList" :key="item.code" :value="item.code" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="searchList.idNo"  style="width: 170px;"></el-input>
                </el-form-item>
                <el-form-item label="身份证地址">
                    <el-input v-model="searchList.idNoAddress"  style="width: 170px;"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="searchList.address"  style="width: 170px;"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="searchList.time"  type="daterange" style="width: 305px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker>
                </el-form-item>
                <el-button type="primary" @click="submitSearchData" style="margin: 0 0 0 50px;">查询</el-button>
            </el-form>
            <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
        <!-- 表格 -->
        <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading="tableLoading">
            <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
            <el-table-column prop="icon" label="头像" sortable min-width="75"><template slot-scope="scope">
                <img :src="scope.row.photo" style="width: 25px;height:30px"></template>
            </el-table-column>
            <el-table-column prop="cardId" label="卡号" sortable min-width="80"></el-table-column>
            <el-table-column prop="name" label="姓名" sortable min-width="80"></el-table-column>
            <el-table-column prop="sex" label="性别" :formatter="formatSex" sortable min-width="75"></el-table-column>
            <el-table-column prop="age" label="年龄" sortable min-width="75"></el-table-column>
            <el-table-column prop="idNo" label="身份证号" sortable min-width="180"></el-table-column>
            <el-table-column prop="createDate" label="创建日期" sortable min-width="170"></el-table-column>
            <el-table-column prop="createNurseName" label="创建护士" sortable min-width="110"></el-table-column>
            <el-table-column prop="phone" label="电话" sortable min-width="120"></el-table-column>
            <el-table-column prop="idNoAddress" label="地址" sortable min-width="350"></el-table-column>
            <el-table-column prop="introducer" label="介绍人" sortable min-width="100"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                <template slot-scope="scope">
                    <el-button  @click="updateDialog(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        <!-- 详情 -->
        <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.isShow" width="1000px" top="60px" :close-on-clcick-modal="false">
        </el-dialog>
    </div>
</template>
<script>
import regx from '@/regx/regx.js'
import api from '@/axios/api.js'
export default {
    name: "newPulpFiling",
    data(){
        return {
            /*搜索相关参数 */
            noData,
            searchList:{
                cardId:'',
                providerName:'',
                idNo:'',
                sex:'',
                idNoAddress:'',
                address:'',
                phone:'',
                bloodType:'',
                providerState:'',
                jsr:'',
                time:''
            },
            tableHeight: document.documentElement.clientHeight - 160,
            bloodTypeList:[],/*血型列表 */
            providerStatusList:[],/**浆员状态列表*/
            tableData:[],/**建档记录列表 */
            tableLoading:false,/**列表显示loading */
            pagination:{/*分页相关参数 */
                currentPage:1,
                pageSize:10,
                total:0
            },
            dialogConfig:{/**弹框配置参数 */
                isShow:false,
                title:'',
                type:'',/** */
            }
        }
    },
    created(){
        let self = this;
            /* 码表列表 */
            /*血型 */
            api.getCodeData(12).then(res=>{
                self.bloodTypeList=res.content;
            });
            /**浆员状态 */
            api.getCodeData(14).then(res=>{
                self.providerStatusList=res.content;
            });
            self.getData();

    },
    methods:{
        /* 点击添加建档信息 */
        inserteDialog(){

        },
        submitSearchData(){/**点击搜索 */
            let self=this;
            self.pagination.currentPage=1;
            self.getData();
        },
        getData(){//获取建档列表
            let self = this;
            self.tableLoading=true;
            let data={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                cardId:self.searchList.cardId,
                providerName:self.searchList.providerName,
                idNo:self.searchList.idNo,
                sex:self.searchList.sex,
                idNoAddress:self.searchList.idNoAddress,
                address:self.searchList.address,
                phone:self.searchList.phone,
                bloodType:self.searchList.bloodType,
                createStartTime:self.searchList.time ? self.timestampToTime(self.searchList.time[0]).substr(0,10) : "",
                createEndTime:self.searchList.time ? self.timestampToTime(self.searchList.time[1]).substr(0,10) : "",
                providerState:self.searchList.providerState,
                jsr:self.searchList.jsr,
            };
            api.providerInfo(data).then(res=>{
                self.tableLoading=false;
                self.pagination.total = res.content.total;
                self.tableData = res.content.records;
            },error=>{
                self.tableLoading=false;
            })
        },
        handleSizeChange(size){/**点击分页每页显示条数 */
            let self = this;
            self.pagination.currentPage=1;
            self.pagination.pageSize=size;
            self.getData();
        },
        handleCurrentChange(currentPage){/**点击跳转到第几页 */
            let self = this;
            self.pagination.currentPage=currentPage;
            self.getData();
        }
    }
}
</script>
<style>

</style>

